iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
自我挑戰組

複習 JavaScript 核心概念系列 第 16

[Day 16] Truthy 和 Falsy

  • 分享至 

  • xImage
  •  

在 JavaScript 中,在 if 的判斷式裡面放任何非布林型別的值,程式並不會報錯,這是因為每個值在需要的時候,都可以被轉換成布林值(true 或 false)。而那些可以被轉換成 true 的值稱作 Truthy,另一些可被轉換成 false 的值稱作 Falsy。接下來就是有關 Truthy 還是 Falsy 的介紹,那我們開始吧。


Falsy(假值)

以下這些值是 Falsy,它們會被轉換成 false:

  1. 空字串(Empty strings):一個不包含任何字元的字串被視為 false。
  2. 零(+0 和 -0): 零是被視為 false 的數字。
  3. NaN(Not a Number): 表示不是數字的數字型別,被視為 false。
  4. null: 表示空值或沒有值,被視為 false。
  5. undefined:表示未定義的變數或物件,被視為 false。
  6. false:就是 false。
// 以下條件判斷式的結果都是 false
if ("")
if (0)
if (-0)
if (NaN)
if (null)
if (undefined)
if (false)

Truthy(真值)

除了上面 Falsy 提到的那些值,其他值都會被轉換成 true。
例如:非空字串非零數字物件陣列函式等。
以下是一些範例:

// 以下條件判斷式的結果都是 true
if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

Truthy 和 Falsy 的使用情境

了解 Truthy 和 Falsy 的特性後,可以有效簡化我們的程式碼
例如,若一個變數只可能為未定義或字串,如果想確定該變數是否為有效的值,
我們可以直接在條件判斷式中直接使用該變數,而不必額外地進行比較:

function checkName(name) {
  if (name) {
    console.log("Name is present: " + name);
  } else {
    console.log("Name is absent.");
  }
}

let name;
checkName(name); // 輸出 "Name is absent."

name = '';
checkName(name); // 輸出 "Name is absent."

name = 'Hero';
checkName(name); // 輸出 "Name is present: Hero"

結語

總結來說,了解 JavaScript 中的 Truthy 和 Falsy,可以使程式碼更為簡潔和易讀,同時避免一些潛在的錯誤。在有了以上概念後實際上還不夠,接下來將要談談搭配邏輯運算子的判斷方式與結果。那我們明天見~

參考資料:


上一篇
[Day 15] JavaScript 中的相等比較(嚴格相等、寬鬆相等和隱含轉型)
下一篇
[Day 17] JavaScript 中的邏輯運算子(&& || ?? !)
系列文
複習 JavaScript 核心概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言